<template>
	<view :data-theme="theme">
		<tui-skeleton v-if="showSkeleton"></tui-skeleton>
		<view class="productSort" :style="{visibility: showSkeleton ? 'hidden' : 'visible', height: winHeight+ 'px' }">
			<view class='header acea-row row-center-wrapper'>
				<view class='acea-row row-between-wrapper input'>
					<text class='iconfont icon-sousuo'></text>
					<input type='text' placeholder='点击搜索店铺 信息'  @input="searchSubmitValue"
					 placeholder-class='placeholder' maxlength="20"></input>
				</view>
			</view>
		</view>
		
		<scroll-view scroll-y="true" @scrolltolower="scroll()" style="height: 90vh;">
			<!-- 附近店铺列表 -->
			<view>
				<view style="position: relative;" class="pad-30">
					<view class="shopItem" v-for="(item,index) in merchantList" :key="item.id" @click="goShop(item.id)">
						<image v-show="item.rectangleLogo" :src="item.avatar"></image>
						<view class="flex flex-column" style="flex: 1;">
							<view class="flex" style="flex: 1;">
								<text class="text-ell" style="flex: 1;font-size: 30rpx;font-weight: bold;">{{item.name}}</text>
								<view class="score">
									<view class='starsList'>
										<block v-for="(itemn, indexn) in item.starLevel" :key="indexn">
											<text class='iconfont icon-pingfen star'></text>
										</block>
										<block v-show="Number(item.starLevel)<5">
											<text v-for="(itemn, indexn) in (5-item.starLevel)" :key="indexn" class='iconfont icon-pingfen noCheck'></text>
										</block>
									</view>
								</view>
							</view>
							<view style="display: flex;">
								<text class='iconfont icon-dizhi'></text>
								<text class="text-ell" style="flex: 1;margin-right: 10rpx;">{{item.addressDetail}}</text>
								<text>{{(item.distance/1000).toFixed(2)}}km</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部提示 -->
			<view class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai' :hidden='!loading'></text>
			</view>
			<view v-if="!loading">
				<view class='pictrue' style="margin: 0 auto;text-align: center;">
					<!-- <image src='/static/images/no-shop.png'></image> -->
					<text>{{loadTitle}}</text>
				</view>
			</view>
		</scroll-view>
		
		<pageFooter></pageFooter>
	</view>
</template>
<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	let app = getApp();
	import {
		getNearMerApi
	} from '@/api/merchant.js';
	import pageFooter from "@/components/pageFooter/index.vue";
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			pageFooter
		},
		// computed: mapGetters(['bottomNavigationIsCustom']),
		data() {
			return {
				theme: app.globalData.theme,
				where: {
					page: 1,
					limit: 20,
					distance: 30000,
					keywords: "",
					lat: null,
					lon: null
				},
				merchantList: [],
				loadTitle: '',
				loading: true,
				loadend: false,
			}
		},
		onLoad(options) {
			this.getNearMer(true);
		},
		methods: {
			getNearMer: async function(isPage) {
					let that = this;
					
					//是否重置列表
					if (isPage === true){
						that.$set(that, 'merchantList', []);
						that.$set(that.where, 'page',  1);
						that.loadend = false;
						that.loading = true;
						that.loadTitle = '';
					}
					
					if (that.loadend) return;
					if (!that.loading) return;
					
					//获取当前定位
					await this.getLocationInfo();
					
					getNearMerApi(that.where).then(res => {
						let list = res.data.list;
						let merchantList = that.$util.SplitArray(list, that.merchantList);
						let loadend = list.length < that.where.limit;
						that.loadend = loadend;
						that.loadTitle = loadend ? '附近无更多店铺' : '下拉加载更多';
						that.$set(that, 'merchantList', merchantList);
						that.$set(that.where, 'page', that.where.page + 1);
						that.loading = false;
					}).catch(err => {
						that.loading = false;
						that.loadTitle = '数据加载异常';
					});
			},
			getLocationInfo() {
				return new Promise((resolve, reject) =>{
					let that = this;
					//获取定位信息
					uni.getLocation({
						success: function(res) {
							that.where.lat = res.latitude;
							that.where.lon = res.longitude;
							resolve('suc');
						},
						fail: (err) => {
							reject('err')
						}
					});
				});
			},
			searchSubmitValue: function(e) {
				console.log(e);
				let that = this;
				that.where.keywords = e.detail.value;
				this.getNearMer(true);
			},
			goShop(id) {
				uni.navigateTo({
					url: `/pages/merchant/home/index?id=${id}`
				})
			},
			scroll() {
				if(!this.loadend){
					this.loading = true;
					this.getNearMer();
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.productSort {
		display: flex;
		flex-direction: column;
		width: 100%;
		.con-box {
			flex: 1;
			display: flex;
			overflow: hidden;
		}
	}
	.productSort .header {
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.productSort .header .input {
		width: 700rpx;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.productSort .header .input .iconfont {
		font-size: 28rpx;
		color: #555;
	}
	.productSort .header .input .placeholder {
		color: #999;
	}
	.productSort .header .input input {
		font-size: 28rpx;
		height: 100%;
		width: 597rpx;
	}
	.productSort .header .input .input-box {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		height: 100%;
		width: 597rpx;
		color: #999999;
	}
	.productSort .aside {
		background-color: #fff;
		overflow-y: auto;
		overflow-x: hidden;
		width: 200rpx;
		height: 100%;
		overflow: hidden;
	}
	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
	}
	.productSort .aside .item_text {
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.productSort .aside .item.on {
		background-color: #f7f7f7;
		border-left: 4rpx solid var(--view-theme);
		width: 100%;
		text-align: center;
		@include main_color(theme);
		font-weight: bold;
	}
	.productSort .conter {
		flex: 1;
		height: 100%;
		padding: 0 14rpx;
		background-color: #f7f7f7;
	}
	.productSort .conter .listw .title {
		height: 100rpx;
		align-items: center;
	}
	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}
	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}
  .productSort .conter .listw .title .list_title,
	.productSort .conter .listw .title uni-image,
	.productSort .conter .listw .title image{
		width: 110rpx;
		height: 26rpx;
		border-radius: 0;
	}
	.productSort .conter .list {
		flex-wrap: wrap;
		background: #fff;
		border-radius: 16rpx;
		padding-bottom: 26rpx;
	}
	.productSort .conter .list .item {
		width: 174rpx;
		margin-top: 26rpx;
	}
	.productSort .conter .list .item .picture,
	.productSort .conter uni-image,
	.productSort .conter .list .item image,
	/deep/.easy-loadimage{
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	.productSort .conter .list .item .name {
		
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}
	
	.shopItem {
		background-color: #fff;
		margin: 20rpx 32rpx 0 32rpx;
		padding: 20rpx 28rpx 20rpx 28rpx;
		border-radius: 24rpx;
		display: flex;
		flex-direction: row;
	}
	.shopItem image{
		width: 132rpx;
		height: 132rpx;
		background-color: blue;
		border-radius: 16rpx;
		margin-right: 20rpx;
	}

	
	.starsList .star{
		color: #fff;
		background-color: #F7A231;
		margin-right: 2rpx;
	}
	.starsList .noCheck{
		color: #fff;
		background-color: lightgrey;
		margin-right: 2rpx;
	}
	.text-ell{
		width: 248rpx;
		overflow: hidden; 
		white-space:nowrap; 
		text-overflow: ellipsis;
	}
</style>
